<!--
@license
Copyright 2020 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="annotations-title-container">
  <h3 class="annotations-title">Annotations ({{numAnnotations}})</h3>
  <ng-container *ngIf="expanded">
    <button
      mat-icon-button
      aria-label="Flag Selected Annotations"
      i18n-aria-label="Label for a button that flags selected annotations."
      (click)="onFlagAnnotations.emit(selectedAnnotations)"
      [disabled]="selectedAnnotations.length === 0"
      title="Flagging annotations adds them to your investigation results, which can later be exported."
    >
      <mat-icon svgIcon="flag_24px"></mat-icon>
    </button>
    <button
      mat-icon-button
      aria-label="Hide Selected Annotations"
      i18n-aria-label="Label for a button that hides selected annotations."
      (click)="onHideAnnotations.emit(selectedAnnotations)"
      [disabled]="selectedAnnotations.length === 0"
      title="Removing non-critical annotations unclutters the view. Removed annotations are removed from all visualizations."
    >
      <mat-icon svgIcon="visibility_off_24px"></mat-icon>
    </button>
  </ng-container>
</div>
<ng-container *ngIf="expanded">
  <mat-slide-toggle
    [checked]="showCounts"
    (change)="onToggleShowCounts.emit()"
    class="show-toggle"
    title="Hides and shows the sample count where applicable (how many samples belong to a category)."
  >
    Sample Count
  </mat-slide-toggle>
  <mat-slide-toggle
    [checked]="showHidden"
    (change)="onToggleShowHidden.emit()"
    class="show-toggle"
    title="Hides and shows hidden annotations in all visualizations."
  >
    Show Hidden
  </mat-slide-toggle>
  <npmi-annotations-search></npmi-annotations-search>
</ng-container>
<button
  class="expand-button"
  mat-icon-button
  aria-label="Hides/Shows the Annotations List"
  i18n-aria-label="Label for a button that hides/shows the annotations list."
  (click)="onToggleExpanded.emit()"
>
  <mat-icon
    [svgIcon]="expanded ? 'expand_less_24px' : 'expand_more_24px'"
  ></mat-icon>
</button>
